<template>
  <el-image-viewer v-if="isPreviewImage" :on-close="closePreviewImage" :url-list="previewImageList"/>
</template>

<script>
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'

  export default {
    components: {
      ElImageViewer
    },
    props: {
      list: {
        type: Array,
        default: null
      }
    },
    data() {
      return {
        isPreviewImage: false,
        previewImageList: []
      }
    },
    methods: {
      open(index, list) {
        if (!list) {
          list = this.list.map(item => this.getImgUrl(item))
        } else {
          list = list.map(item => this.getImgUrl(item))
        }
        this.previewImageList = [...list.slice(index), ...list.slice(0, index)]
        this.isPreviewImage = true
      },
      closePreviewImage() {
        this.isPreviewImage = false
      },
      getImgUrl(uri = '') {
        if (uri) {
          if (uri.substr(0, 4) === 'http' || uri.substr(0, 4) === 'blob') {
            return uri
          } else {
            return process.env.VUE_APP_BASE_IMAGE_URL + uri
          }
        }
        return ''
      }
    }
  }
</script>

<style scoped>

</style>
